<template>
  <div class="menu-setting">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>菜单管理</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
    </div>

    <div class="menu-setting-content">
      <div class="left-content-wrapper">
        <div class="header-tip-wrapper">
          <div class="header-tip"></div>
          <div class="header-text">菜单列表</div>
        </div>
        <el-tree
          @node-click="nodeClick"
          :data="treeData"
          default-expand-all
          :expand-on-click-node="false"
          ref="tree"
          node-key="id">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          :class="data.type == 1 ? 'pageType' : data.type == 2 ? 'fileType' : data.type == 3 ? 'buttonType' : ''"></span>
        <span class="label" :class="{'select-label-menu':data.id == currentMenuId}">{{node.label}}</span>
      </span>
        </el-tree>
      </div>
      <div class="right-content-wrapper">
        <div class="header-tip-wrapper">
          <div class="header-tip"></div>
          <div class="header-text">菜单信息</div>
          <span class="authority-btn" @click="saveBtnSubmit">保存</span>
          <ul class="menu-edit-wrapper">
            <li>
              <div class="add-user-item">
                <span class="add-text">菜单编号：</span>
                <input type="text" class="dap-input default-dap-input-text" readonly="true"
                       v-model="menuSeriesId" disabled="true">
              </div>
              <p class="tip-text"></p>
            </li>
            <li>
              <div class="add-user-item">
                <span class="add-text">菜单名称：</span>
                <input type="text" v-model="menuName" class="dap-input"
                       :class="{'error-input-border':isErrorMenuName}" maxlength="20">
              </div>
              <p class="tip-text"><span v-show="isErrorMenuName">{{errorMenuName}}</span></p>
            </li>
            <li>
              <div class="add-user-item">
                <span class="add-text">显示顺序：</span>
                <input type="text" v-model="menuOrder" class="dap-input"
                       :class="{'error-input-border':isErrorMenuOrder}" maxlength="20">
              </div>
              <p class="tip-text"><span v-show="isErrorMenuOrder">{{errorMenuOrder}}</span></p>
            </li>
            <li v-show="menuEleVisible">
              <div class="add-user-item">
                <span class="add-text">菜单可见：</span>
                <single-list-filter-without-cb ref="menuVisible"
                                               @confirmSingleSelect="confirmSingleSelectMenuVisible">
                </single-list-filter-without-cb>
              </div>
              <p class="tip-text"></p>
            </li>
          </ul>

        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox';
  import {svgPath, quitFullScreen} from "../../assets/js/utils";
  import {getMenuManagerList, editMenuListInfo} from '../../api/report'
  import {bus} from '../last/filter/js/bus'
  import {isChineseValue} from '../../assets/js/utils'
  export default {
    props: ['isChange', 'fullScreen'],
    data() {
      return {
        svgPath: svgPath,
        canShow: true,
        treeData: [],
        menuVisibleList: [{'selectId': 1, 'selectName': '显示'}, {'selectId': 0, 'selectName': '隐藏'}],
        isErrorMenuOrder: false,
        isErrorMenuName: false,
        errorMenuName: '',
        errorMenuOrder: '',
        menuSeriesId: '',
        menuName: '',
        menuOrder: '',
        showFlag: 1,
        currentMenuId: '',
        menuEleVisible: true
      }
    },
    components: {
      SingleListFilterWithoutCb
    },
    watch: {
      isChange(){
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      }
    },
    mounted() {
      document.querySelector('body').addEventListener("click", () => {
        this.inputDataIsEnable()
      });
      this.getMenuManagerList()
      // 下拉菜单可见 显示和隐藏
      this.$refs.menuVisible.setSingleListData(this.menuVisibleList)
    },
    methods: {
      setTestData() {
        const par = [{
          id: '1',
          label: '一级 1',
          type: 1,
          children: [{
            id: '4',
            label: '二级 1-1',
            type: 2,
            children: [{
              id: '9',
              label: '三级 1-1-1',
              type: 3,
            }, {
              id: '10',
              label: '三级 1-1-2',
              type: 3,
            }]
          }]
        }, {
          id: '2',
          label: '一级 2',
          type: 1,
          children: [{
            id: '5',
            label: '二级 2-1',
            type: 2,
          }, {
            id: '6',
            label: '二级 2-2',
            type: 2,
          }]
        }, {
          id: '3',
          label: '一级 3',
          type: 1,
          children: [{
            id: '7',
            label: '二级 3-1',
            type: 2,
          }, {
            id: '8',
            label: '二级 3-2',
            type: 2,
          }]
        }];

        this.treeData = par;
      },
      transformInitMenuData(data) {
        let par = []
        data.menu.forEach((item, index) => {
          let parParent = {}
          parParent.id = item.sysMenu.menuId;
          parParent.label = item.sysMenu.menuName;
          parParent.type = item.sysMenu.menuType;
          parParent.menuOrder = item.sysMenu.menuOrder
          parParent.showFlag = item.sysMenu.showFlag
          if (item.childList) {
            parParent.children = []
            item.childList.forEach((child, childIndex) => {
              let parChild = {}
              parChild.id = child.sysMenu.menuId;
              parChild.label = child.sysMenu.menuName;
              parChild.type = child.sysMenu.menuType;
              parChild.menuOrder = child.sysMenu.menuOrder
              parChild.showFlag = child.sysMenu.showFlag
              if (child.childList) {
                parChild.children = []
                child.childList.forEach((twoChild, twoChildIndex) => {
                  let parTwoChild = {}
                  parTwoChild.id = twoChild.sysMenu.menuId;
                  parTwoChild.label = twoChild.sysMenu.menuName;
                  parTwoChild.type = twoChild.sysMenu.menuType;
                  parTwoChild.menuOrder = twoChild.sysMenu.menuOrder
                  parTwoChild.showFlag = twoChild.sysMenu.showFlag
                  parChild.children.push(parTwoChild)
                })
              }
              parParent.children.push(parChild)
            })
          }
          par.push(parParent)
        })
        this.treeData = par;
        this.nodeClick(this.treeData[0])
      },
      closeAll () {
        quitFullScreen();
      },
      confirmSingleSelectMenuVisible(filter) {
        this.showFlag = filter
      },
      getMenuManagerList() {
        getMenuManagerList().then((rep) => {
          if (rep.code == 0) {
            this.responseData = rep.data;
            this.transformInitMenuData(rep.data)
          }
        }).catch(err => {
        });
      },
      saveBtnSubmit() {
        console.log('this.inputDataIsEnable:' + this.inputDataIsEnable())
        if (this.inputDataIsEnable()) {
          editMenuListInfo(this.menuSeriesId, this.menuName, this.menuOrder, this.showFlag).then((rep) => {
            if (rep.code == 0) {
              this.$message({
                message: "菜单信息修改成功！",
                center: true,
                type: "success"
              });
              this.getMenuManagerList()
              bus.$emit('changeMenuList')
            }
          }).catch(err => {
          });
        }
      },
      inputDataIsEnable(){
        // console.log('this.menuName  ' + this.menuName)
        // console.log('this.menuOrder  ' + this.menuOrder)
        if (!this.menuName || this.menuName.length == 0) {
          this.isErrorMenuName = true
          this.errorMenuName = '菜单名称不能为空'
          return false
        } else {
          if (!isChineseValue(this.menuName)) {
            this.isErrorMenuName = true
            this.errorMenuName = '菜单名称格式不正确'
            return false
          } else {
//            if (this.judgeInputMenuNameIsExist(this.menuName)) {
//              this.isErrorMenuName = true
//              this.errorMenuName = '菜单名称已存在'
//              return false
//            } else {
            this.isErrorMenuName = false
//            }
          }
        }
        if (!this.menuOrder || this.menuOrder.length == 0) {
          this.isErrorMenuOrder = true
          this.errorMenuOrder = '显示顺序不能为空'
          return false
        } else {
          this.isErrorMenuOrder = false
        }
        return true
      },
      judgeInputMenuNameIsExist(inputMenuName) {
        console.log('inputMenuName===' + inputMenuName)
        let isExist = false;
        this.responseData.menu.forEach((item, index) => {
          console.log('item===' + item.sysMenu.menuName)
          if (item.sysMenu.menuName == inputMenuName) {
            isExist = true
            return true
          }
          if (item.childList) {
            item.childList.forEach((child, childIndex) => {
              if (child.sysMenu.menuName == inputMenuName) {
                isExist = true
                return true
              }
              if (child.childList) {
                child.childList.forEach((twoChild, twoChildIndex) => {
                  if (twoChild.sysMenu.menuName == inputMenuName) {
                    isExist = true
                    return true
                  }
                })
              }
            })
          }
        })
        return isExist;
      },
      nodeClick(arg1){
        // 点击后改变菜单颜色
        this.currentMenuId = arg1.id

        this.menuSeriesId = arg1.id
        this.menuName = arg1.label
        this.menuOrder = arg1.menuOrder + ''
        this.showFlag = arg1.showFlag;

        // 如果是菜单管理，则只有显示项，第一次验收后修改为菜单可见一整行隐藏
        if (this.menuSeriesId == 30033) {
//          let menuList = [];
//          menuList.push(this.menuVisibleList[0]);
//          this.$refs.menuVisible.setSingleListData(menuList)
          this.menuEleVisible = false
        } else {
//          this.$refs.menuVisible.setSingleListData(this.menuVisibleList)
          this.menuEleVisible = true
        }
        // 设置显示与隐藏的显示项
        if (this.showFlag == 1) {
          this.$refs.menuVisible.setCurrentSelectPosition(0)
        } else {
          this.$refs.menuVisible.setCurrentSelectPosition(1)
        }
        console.log(arg1)
      }
    }
  }
</script>
<style lang="scss">

  .menu-setting {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;

    .menu-setting-content {
      margin: 20px 30px 40px 30px;
      flex: 1 1 auto;
      display: flex;
    }

    .left-content-wrapper {
      background: #1b2b44;
      border-radius: 5px;
      overflow: auto;
      padding-right: 20px;
    }

    .header-tip-wrapper {
      height: 30px;
      line-height: 30px;
      margin: 10px 0;
    }

    .header-tip {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background: #2b9ff6;
      display: inline-block;
      margin-left: 18px;
    }

    .header-text {
      display: inline-block;
      margin-left: 5px;
    }

    .right-content-wrapper {
      flex: 1;
      background: #1b2b44;
      margin-left: 20px;
      border-radius: 5px;
    }

    .add-user-item {
      display: flex;
      align-items: center;
    }

    .add-text {
      width: 60px;
    }

    .dap-input {
      width: 200px;
      height: 26px;
    }

    .default-dap-input-text {
      color: #A9A9A9;
    }

    /*.default-dap-input-text:hover {*/
    /*color: #FFFFFF;*/
    /*}*/

    .tip-text {
      height: 30px;
      line-height: 30px;
      padding-left: 65px;
      color: red;
      margin-bottom: 10px;
    }

    .menu-edit-wrapper {
      margin: 30px;
    }

    .authority-btn {
      float: right;
      width: 80px;
      height: 30px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      background-color: #2b9ff6;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 20px;
    }

    .authority-btn:hover {
      background-color: #0a82d8;
    }

    .add-user-item .top-text-wrapper {
      min-width: 200px;
    }

    .add-user-item .drop-down-wrapper {
      width: 200px;
    }

    .menu-setting-content .el-tree {
      background: #1b2b44;
      width: 100%;
      box-sizing: border-box;
      padding-left: 30px;
      margin-left: 0;
      height: 10px;
    }

    /* 箭头颜色 */
    .el-tree-node__expand-icon {
      color: #666;
    }

    /* 选择框颜色 */
    .el-checkbox__inner {
      background-color: transparent;
      border: 1px solid #666;
    }

    /* 移动上去的颜色 */
    .el-checkbox__inner:hover {
      border: 1px solid #666;
    }

    /* 选择后的框的颜色 */
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #666;
    }

    /* 箭头颜色 */
    .el-checkbox__inner::after {
    }

    /* 移动颜色 */
    .el-tree-node:focus > .el-tree-node__content, .left-content-wrapper .el-tree-node__content:hover {
      /*background-color: #415f8c;*/
      background-color: transparent;
    }

    /* 自定义节点 */
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12px;
    }

    .custom-tree-node .pageType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-file-icon.png");
    }

    .custom-tree-node .fileType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-page-icon.png");
    }

    .custom-tree-node .buttonType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-button-icon.png");
    }

    .custom-tree-node .label {
      margin-left: 10px;
      color: #fff;
    }

    .custom-tree-node .label:hover {
      color: #0D79C8;
    }

    .custom-tree-node .select-label-menu {
      color: #0D79C8;
    }
  }
</style>
